<template>
	<div class="city">
		<div>
			<div class="city-title">定位城市</div>
			<div class="city-list city-list-inline clearfix">
				<div class="location-city" v-if="cityinfo.city!=null" @click="path">{{cityinfo.city}}</div>
				<div class="location-city" v-else @click="path">定位获取失败……</div>
			</div>
		</div>

		<div class="history-city-list">
			<div class="city-title">最近访问城市</div>
			<div class="city-list city-list-inline clearfix">
				<div class="city-item" @click="path">广州</div>
			</div>
		</div>

		<div>
			<div class="city-title">热门城市</div>
			<div class="city-list city-list-inline clearfix">
				<div class="city-item" v-for="item in hot" :key="item.id" @click="path">{{item.nm}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: [],

		data() {
			return {
				hot: [{
					"id": 10,
					"nm": "上海",
					"py": "shanghai"
				}, {
					"id": 1,
					"nm": "北京",
					"py": "beijing"
				}, {
					"id": 20,
					"nm": "广州",
					"py": "guangzhou"
				}, {
					"id": 30,
					"nm": "深圳",
					"py": "shenzhen"
				}, {
					"id": 57,
					"nm": "武汉",
					"py": "wuhan"
				}, {
					"id": 40,
					"nm": "天津",
					"py": "tianjin"
				}, {
					"id": 42,
					"nm": "西安",
					"py": "xian"
				}, {
					"id": 55,
					"nm": "南京",
					"py": "nanjing"
				}, {
					"id": 50,
					"nm": "杭州",
					"py": "hangzhou"
				}, {
					"id": 59,
					"nm": "成都",
					"py": "chengdu"
				}, {
					"id": 45,
					"nm": "重庆",
					"py": "chongqing"
				}],

				cityinfo: this.$route.query.cityinfo
			}

		},
		created() {

		},
		methods: {
			path() {
				this.$router.push({
					path: "/"
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.city {
		background-color: #ebebeb;
		font-size: 14px;
	}

	.city-title {
		padding-left: 15px;
		line-height: 30px;
	}

	.city-list-inline {
		background-color: #f5f5f5;
		padding-bottom: 8px;

		.location-city,
		.city-item {
			float: left;
			background: #fff;
			width: 29%;
			height: 33px;
			margin-top: 15px;
			margin-left: 4%;
			padding: 0 4px;
			border: 1px solid #e6e6e6;
			border-radius: 3px;
			line-height: 33px;
			text-align: center;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.location-city {
			width: auto;
			min-width: 30%;
			padding: 0 20px;

		}
	}

	.city-list {
		padding-left: 15px;
		padding-right: 15px;
	}

	.clearfix {

		&::before,
		&::after {
			content: " ";
			display: table;
		}

		&::after {
			content: " ";
			display: table;
			clear: both;
		}
	}
</style>
